<template>
  <a-layout>
    <div class="titleBar">
      <div class="titleBar-left">
        <div class="header-title">Electron-AntDV</div>
        <div class="header-subtitle">{{ title }} {{ version }}</div>
      </div>
      <div class="titleBar-center">
        <a-tooltip placement="bottom" color="#108ee9">
          <template #title>重新进入应用</template>
          <a class="controls" @click="goHome">
            <HomeOutlined />
          </a>
        </a-tooltip>




        <a-tooltip placement="bottom" color="geekblue">
          <template #title>打开开源项目主页</template>
          <a class="controls" @click="topMenu(2)">
            <NotificationOutlined />
          </a>
        </a-tooltip>
        <a-dropdown placement="bottom" arrow>
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="topMenu(2)"> 弹窗一 </a-menu-item>

              <a-menu-divider />
              <a-menu-item key="2" @click="topMenu(2)"> 弹窗二 </a-menu-item>
            </a-menu>
          </template>
          <a class="controls">
            <AppstoreOutlined />
          </a>
        </a-dropdown>
      </div>


      <div class="titleBar-right">
        <div class="operate-button minimum-button" @click="minimizeWindow">
          <img src="~@/assets/bar/w-min.svg" />
        </div>
        <div v-if="!windowExpandState" class="operate-button" @click="expandWindow">
          <img src="~@/assets/bar/w-expand.svg" />
        </div>
        <div v-if="windowExpandState" class="operate-button" @click="restoreWindow">
          <img src="~@/assets/bar/w-restore.svg" />
        </div>

        <div class="operate-button btn-last" @click="closeWindow">
          <img src="~@/assets/bar/w-close.svg" />
        </div>
      </div>
    </div>
  </a-layout>
</template>

<script setup>
import { ipcApiRoute, specialIpcRoute } from "@/api/main";
import { ipc, isEE } from "@/utils/ipcRenderer";
import { message } from "ant-design-vue";

import {  watch, reactive, ref, onMounted } from "vue";
import {
  HomeOutlined,
  NotificationOutlined,
  SyncOutlined,
  AppstoreOutlined,
} from "@ant-design/icons-vue";

import { useRouter } from "vue-router";

const router = useRouter();

const props = defineProps({
  version:  String,
  title: String,

});
const emit = defineEmits(["toggle-content-expand"]);

const windowExpandState = ref(false);

const state = reactive({
  signed: false
});


function minimizeWindow() {
  isEE
    ? ipc.invoke(ipcApiRoute.window.minimizeWindow).then((ret) => {
      console.log("控制总线返回消息：", ret);
    })
    : (console.log("Not in EE!"), message.success("Not in EE!"));
}
/**
 * 展开窗口函数
 *
 * 根据当前环境，调用相应的接口展开窗口。
 * 如果当前在EE环境中，则通过ipc调用expandWindow接口展开窗口；
 * 如果不在EE环境中，则打印提示信息并在前端显示成功消息。
 */
function expandWindow() {
  isEE
    ? ipc.invoke(ipcApiRoute.window.expandWindow).then((ret) => {
      console.log("控制总线返回expandWindow消息", ret);
      windowExpandState.value = true;
    })
    : (console.log("Not in EE!"), message.success("Not in EE!"));
}

/**
 * 恢复窗口大小到默认状态
 *
 * 根据当前环境，调用相应的接口恢复窗口大小到默认状态。
 * 如果当前在EE环境中，则通过ipc调用restoreWindow接口恢复窗口大小；
 */
function restoreWindow() {
  isEE
    ? ipc.invoke(ipcApiRoute.window.restoreWindow).then((ret) => {
      console.log("控制总线返回restoreWindow消息", ret);
      windowExpandState.value = false;
    })
    : (console.log("Not in EE!"), message.success("Not in EE!"));
}

/**
 * 关闭窗口的函数
 *
 * 根据是否处于EE环境，执行不同的关闭窗口操作。
 * 如果处于EE环境，通过ipc通道调用closeWindow方法关闭窗口，并打印控制总线返回的closeWindow消息。
 * 如果不处于EE环境，打印提示信息"Not in EE!"，并显示消息提示框"Not in EE!"。
 */
function closeWindow() {
  isEE
    ? ipc.invoke(ipcApiRoute.window.closeWindow).then((ret) => {
      console.log("控制总线返回closeWindow消息", ret);
    })
    : (console.log("Not in EE!"), message.success("Not in EE!"));
}

/**
 * 刷新当前页面
 *
 * 该函数用于刷新当前页面，相当于按下浏览器的刷新按钮。
 */
function refreshPage() {
  window.location.reload();
}
/**
 * 跳转到首页
 *
 * 使用 Vue Router 跳转到应用的根路径（即首页）
 */
function goHome() {
  router.push("/");
}
function topMenu(type) {

  const windowRef = {
    2: { content:"https://gitee.com/vkei/electron-antdv/",windowName: "window-vkei", windowTitle: "vkei", isModal: false },
  };

  const opts = windowRef[type];
  if (isEE) {
    ipc
      .invoke(ipcApiRoute.window.createWindow, {
        type: "web",
        content: opts.content,        
        ...opts,
      })
      .then((id) => {
        console.log('打开新窗口[' + opts.windowName + '] id:', id);
      });
  } else {
    console.error("需要在electron环境下运行弹窗！");
  }
}
</script>

<style lang="less" scoped>
.titleBar {
  width: 100%;
  position: relative;
  z-index: 9999;
  height: 56px;
  padding: 0;
  -webkit-app-region: drag;
  /* 设置该属性表明这是可拖拽区域，用来移动窗口 */
  user-select: none;
  /* 避免选中 */
  overflow: hidden;
  display: flex;
  flex-shrink: 0;
  /* 避免被收缩 */
  justify-content: space-between;
  background: linear-gradient(to right, #334dce, #1f67f7);
}

.titleBar img {
  max-height: 40px;
}

.titleBar .logo {
  height: 20px;
  margin-left: 15px;
}

.titleBar-center,
.titleBar-left,
.titleBar-right {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#appstore {
  width: 120px;
}

.titleBar-right {
  width: 120px;
  justify-content: right;
}

.btn-last:last-child {
  padding-right: 6px;
}

.titleBar-center {
  margin-right: 20px;
  width: 100%;
  justify-content: flex-end;
  gap: 8px;
}

.titleBar-center a {
  -webkit-app-region: no-drag;
  cursor: pointer;
  display: inline-block;
  line-height: normal;
}

.titleBar-center .avatar img {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  vertical-align: middle;
}

.titleBar-center .controls {
  -webkit-app-region: no-drag;
}

.titleBar-center .controls img {
  width: 40px;
  padding: 8px;
  vertical-align: middle;
  transition: background-color 0.2s;
  background-color: rgba(255, 255, 255, 0);
  border-radius: 20px;
}

.titleBar-center .controls .anticon {
  font-size: 18px;
  color: rgba(255, 255, 255, 1);
}

.titleBar-center a.controls {
  transition: background-color 0.2s;
  background-color: rgba(255, 255, 255, 0);
  border-radius: 20px;
  height: 40px;
  width: 40px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.titleBar-center .controls:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.titleBar-center .controls img:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.titleBar-center .btn {
  -webkit-app-region: no-drag;
  margin-left: 10px;
  display: inline-block;
  padding: 6px 16px;
  font-weight: 600;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.8);
  color: #334dce;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.2s,
    color 0.5s;
  text-decoration: none;
}

.titleBar-center .btn:hover {
  background-color: rgba(255, 255, 255, 1);
}

.titleBar {
  line-height:1.3;
}
.titleBar .header-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.9);
  margin-left:10px;
  font-size: 20px;
}

.titleBar .header-subtitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 300 !important;
  color: rgba(255, 255, 255, 0.9);
  margin-left: 6px;
  font-size: 14px;
  margin-top: -4px;
}

.titleBar .operate-button {
  width: 35px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  -webkit-app-region: no-drag;
  transition: opacity 0.2s ease;
}

.titleBar .operate-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.titleBar .operate-button img {
  width: 16px;
  height: 16px;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.titleBar .operate-button:hover img {
  opacity: 0.8;
}

@media (max-width: 700px) {
  .titleBar-center {
    display: none;
  }
}
</style>
